<!DOCTYPE html>
<html>
<head>
    <title>日历清单</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <!-- 日历模块 开始 -->
    <div class="calendar">

        <!-- 头部 开始 -->
        <div class="header">
            <!-- 上一个月的按钮 -->
            <button class="prev" onclick="prevMonth()">←</button>
            <!-- 显示当前月份 -->
            <h1 id="currentMonth" class="currentMonth"></h1>
            <!-- 下一个月的按钮 -->
            <button class="next" onclick="nextMonth()">→</button>
        </div>
        <!-- 头部 结束 -->

        <!-- 显示星期列表 开始 -->
        <div class="days">
            <div>Sun</div>
            <div>Mon</div>
            <div>Tue</div>
            <div>Wed</div>
            <div>Thu</div>
            <div>Fri</div>
            <div>Sat</div>
        </div>
        <!-- 显示星期列表 结束 -->
        
        <!-- 每一个cells都是一个方块，代表1天 -->
        <div class="cells">
        </div>
    </div>
    <!-- 日历模块 结束 -->

    <!-- 任务输入模块 开始 -->
    <div class="input">
        <!-- 任务输入框 -->
        <input type="text" id="taskInput" placeholder="记录工作">
        <!-- 添加任务按钮 -->
        <button onclick="addTask()">添加</button>
    </div>
    <!-- 任务输入模块 结束 -->

    <!-- 任务列表显示模块 开始 -->
    <ul id="taskList" class="taskList"></ul>
    <!-- 任务列表显示模块 结束 -->

    <script src="script.js"></script>
</body>
</html>
